<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>演示：toastr提示插件</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="bootstrap-combined.min.css" rel="stylesheet">
        <link href="toastr.css" rel="stylesheet" type="text/css" />
		<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <script src="toastr.js"></script>
        <style>
            .row {
                margin-left: 0;
            }
        </style>
    </head>

    <body class="container">
        <section class="row">
            <h1>toastr</h1>

            <div class="well row">
                <div class="row">
                    <div class="span4">
                        <div class="control-group">
                            <div class="controls">
                                <label class="control-label" for="title">标题</label>
                                <input id="title" type="text" class="input-large" placeholder="请输入标题 ..." />
                                <label class="control-label" for="message">内容</label>
                                <textarea class="input-large" id="message" rows="3" placeholder="请输入内容 ..."></textarea>
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <label class="checkbox" for="closeButton">
                                    <input id="closeButton" type="checkbox" value="checked" class="input-mini" />关闭按钮
                                </label>
                            </div>
                            <div class="controls">
                                <label class="checkbox" for="addBehaviorOnToastClick">
                                    <input id="addBehaviorOnToastClick" type="checkbox" value="checked" class="input-mini" />添加点击事件
                                </label>
                            </div>
                            <div class="controls">
                                <label class="checkbox" for="debugInfo">
                                    <input id="debugInfo" type="checkbox" value="checked" class="input-mini" />调试
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="span2">
                        <div class="control-group" id="toastTypeGroup">
                            <div class="controls">
                                <label>类型</label>
                                <label class="radio">
                                    <input type="radio" name="toasts" value="success" checked />成功
                                </label>
                                <label class="radio">
                                    <input type="radio" name="toasts" value="info" />提示
                                </label>
                                <label class="radio">
                                    <input type="radio" name="toasts" value="warning" />警告
                                </label>
                                <label class="radio">
                                    <input type="radio" name="toasts" value="error" />错误
                                </label>
                            </div>
                        </div>
                        <div class="control-group" id="positionGroup">
                            <div class="controls">
                                <label>位置</label>
                                <label class="radio">
                                    <input type="radio" name="positions" value="toast-top-right" checked />Top Right
                                </label>
                                <label class="radio">
                                    <input type="radio" name="positions" value="toast-bottom-right" />Bottom Right
                                </label>
                                <label class="radio">
                                    <input type="radio" name="positions" value="toast-bottom-left" />Bottom Left
                                </label>
                                <label class="radio">
                                    <input type="radio" name="positions" value="toast-top-left" />Top Left
                                </label>
                                <label class="radio">
                                    <input type="radio" name="positions" value="toast-top-full-width" />Top Full Width
                                </label>
                                <label class="radio">
                                    <input type="radio" name="positions" value="toast-bottom-full-width" />Bottom Full Width
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="span2">
                        <div class="control-group">
                            <div class="controls">
                                <label class="control-label" for="showEasing">显示通知</label>
                                <input id="showEasing" type="text" placeholder="swing, linear" class="input-mini" value="swing" />

                                <label class="control-label" for="hideEasing">隐藏通知</label>
                                <input id="hideEasing" type="text" placeholder="swing, linear" class="input-mini" value="linear" />

                                <label class="control-label" for="showMethod">显示方式</label>
                                <input id="showMethod" type="text" placeholder="show, fadeIn, slideDown" class="input-mini" value="fadeIn" />

                                <label class="control-label" for="hideMethod">隐藏方式</label>
                                <input id="hideMethod" type="text" placeholder="hide, fadeOut, slideUp" class="input-mini" value="fadeOut" />
                            </div>
                        </div>
                    </div>

                    <div class="span3">
                        <div class="control-group">
                            <div class="controls">
                                <label class="control-label" for="showDuration">显示延迟</label>
                                <input id="showDuration" type="text" placeholder="ms" class="input-mini" value="300" />

                                <label class="control-label" for="hideDuration">隐藏延迟</label>
                                <input id="hideDuration" type="text" placeholder="ms" class="input-mini" value="1000" />

                                <label class="control-label" for="timeOut">隐藏时间</label>
                                <input id="timeOut" type="text" placeholder="ms" class="input-mini" value="5000" />

                                <label class="control-label" for="timeOut">延迟时间</label>
                                <input id="extendedTimeOut" type="text" placeholder="ms" class="input-mini" value="1000" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <button type="button" class="btn btn-primary" id="showtoast">显示</button>
                    <button type="button" class="btn btn-danger" id="cleartoasts">清除</button>
                    <button type="button" class="btn btn-danger" id="clearlasttoast">清除最新</button>
                </div>

                <div class="row" style='margin-top: 25px;'>
                    <pre id='toastrOptions'></pre>
                </div>
            </div>
        </section>

        

        <script type="text/javascript">
            $(function() {
                var i = -1;
                var toastCount = 0;
                var $toastlast;

                var getMessage = function() {
                    var msgs = ['My name is Inigo Montoya. You killed my father. Prepare to die!',
                        '<div><input class="input-small" value="textbox"/>&nbsp;<a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Surprise me</button></div>',
                        'Are you the six fingered man?',
                        'Inconceivable!',
                        'I do not think that means what you think it means.',
                        'Have fun storming the castle!'
                    ];
                    i++;
                    if (i === msgs.length) {
                        i = 0;
                    }

                    return msgs[i];
                };
                $('#showtoast').click(function() {
                    var shortCutFunction = $("#toastTypeGroup input:radio:checked").val();
                    var msg = $('#message').val();
                    var title = $('#title').val() || '';
                    var $showDuration = $('#showDuration');
                    var $hideDuration = $('#hideDuration');
                    var $timeOut = $('#timeOut');
                    var $extendedTimeOut = $('#extendedTimeOut');
                    var $showEasing = $('#showEasing');
                    var $hideEasing = $('#hideEasing');
                    var $showMethod = $('#showMethod');
                    var $hideMethod = $('#hideMethod');
                    var toastIndex = toastCount++;

                    toastr.options = {
                        closeButton: $('#closeButton').prop('checked'),
                        debug: $('#debugInfo').prop('checked'),
                        positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right',
                        onclick: null
                    };

                    if ($('#addBehaviorOnToastClick').prop('checked')) {
                        toastr.options.onclick = function() {
                            alert('You can perform some custom action after a toast goes away');
                        };
                    }

                    if ($showDuration.val().length) {
                        toastr.options.showDuration = $showDuration.val();
                    }

                    if ($hideDuration.val().length) {
                        toastr.options.hideDuration = $hideDuration.val();
                    }

                    if ($timeOut.val().length) {
                        toastr.options.timeOut = $timeOut.val();
                    }

                    if ($extendedTimeOut.val().length) {
                        toastr.options.extendedTimeOut = $extendedTimeOut.val();
                    }

                    if ($showEasing.val().length) {
                        toastr.options.showEasing = $showEasing.val();
                    }

                    if ($hideEasing.val().length) {
                        toastr.options.hideEasing = $hideEasing.val();
                    }

                    if ($showMethod.val().length) {
                        toastr.options.showMethod = $showMethod.val();
                    }

                    if ($hideMethod.val().length) {
                        toastr.options.hideMethod = $hideMethod.val();
                    }

                    if (!msg) {
                        msg = getMessage();
                    }

                    $("#toastrOptions").text("Command: toastr["
                            + shortCutFunction
                            + "](\""
                            + msg
                            + (title ? "\", \"" + title : '')
                            + "\")\n\ntoastr.options = "
                            + JSON.stringify(toastr.options, null, 2)
                            );

                    var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
                    $toastlast = $toast;
                    if ($toast.find('#okBtn').length) {
                        $toast.delegate('#okBtn', 'click', function() {
                            alert('you clicked me. i was toast #' + toastIndex + '. goodbye!');
                            $toast.remove();
                        });
                    }
                    if ($toast.find('#surpriseBtn').length) {
                        $toast.delegate('#surpriseBtn', 'click', function() {
                            alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
                        });
                    }
                });
                function getLastToast() {
                    return $toastlast;
                }
                $('#clearlasttoast').click(function() {
                    toastr.clear(getLastToast());
                });
                $('#cleartoasts').click(function() {
                    toastr.clear();
                });
            })
        </script>
    </body>
</html>
